<script setup>
import { getLeftTreeByOther } from '@/api/satellite/Satellite'
import { ref } from 'vue'
import Manual from '@/views/failureEffectsAnalysis/manual/index.vue'
import Auto from '@/views/failureEffectsAnalysis/auto/index.vue'
const treeLoading = ref(false)
const treeData = ref([
  { name: '通信卫星', code: 'txwx', children: [] },
  { name: '中继卫星', code: 'zjwx', children: [] }
])

const xingTypeToCode = {
  TongXin: 'txwx',
  ZhongJi: 'zjwx'
}

const treeSelectedKeys = ref([])
const treeExpandedKeys = ref([])
const satelliteInfo = ref({})

const fetchTreeData = async (xingType) => {
  try {
    treeSelectedKeys.value = []
    treeExpandedKeys.value = []
    satelliteInfo.value = undefined
    treeLoading.value = true
    const { code, data } = await getLeftTreeByOther({
      xingType,
      pageNum: 1,
      pageSize: 1000
    })
    if (code === 200) {
      const code = xingTypeToCode[xingType]
      const node = treeData.value.find((item) => item.code === code)
      if (node) {
        node.children = data
      }
      if (node.code === 'txwx' && node.children.length > 0) {
        treeExpandedKeys.value = ['txwx']
        treeSelectedKeys.value = [node.children[0].code]
        satelliteInfo.value = node.children[0]
      }
    }
  } catch (e) {
    console.log(e)
  } finally {
    treeLoading.value = false
  }
}

fetchTreeData('TongXin')
fetchTreeData('ZhongJi')

const treeSelected = (newSelectedKeys, event) => {
  if (newSelectedKeys[0] === treeData.value[0].code || newSelectedKeys[0] === treeData.value[1].code) {
    treeSelectedKeys.value = []
    satelliteInfo.value = undefined
  } else {
    satelliteInfo.value = { ...event.node }
  }
}
</script>

<template>
  <div class="page-failure-effects-analysis">
    <a-card title="卫星" style="width: 13%">
      <div class="page-left">
        <a-spin :loading="treeLoading" tip="加载中...">
          <a-tree
            :data="treeData"
            v-model:selected-keys="treeSelectedKeys"
            v-model:expanded-keys="treeExpandedKeys"
            :field-names="{ key: 'code', title: 'name' }"
            @select="treeSelected"
          />
        </a-spin>
      </div>
    </a-card>
    <a-card class="page-right">
      <a-tabs :destroy-on-hide="true" default-active-key="manual" :lazy-load="true">
        <a-tab-pane key="manual" title="手动试算">
          <manual :satellite-info="satelliteInfo" />
        </a-tab-pane>
        <a-tab-pane key="auto" title="自动运行">
          <auto :satellite-info="satelliteInfo" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<style scoped lang="less">
.page-failure-effects-analysis {
  display: flex;
  gap: 12px;
  height: 100%;

  .page-right {
    height: 100%;
    flex: 1;

    :deep(.arco-card-body) {
      height: 100%;
    }

    .arco-tabs {
      height: 100%;

      :deep(.arco-tabs-content) {
        height: calc(100% - 40px);

        .arco-tabs-content-list {
          height: 100%;
          .arco-tabs-content-item {
            height: 100%;
          }

          .arco-tabs-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
